<html>
<head>
<title>لجنـــــ.تك —Lagne.tk</title>
<meta http-equiv="X-Frame-Options" content="GOFORIT">
<! <script src="jquery.js">

<!-- Google-hosted jQuery library, might load faster! -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<!-- Google Analytics Tracking code -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-31377357-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- END of Google Analytics Tracking code -->
</head>
<body bgcolor="black" background="black">

<p align="left">
<canvas	id="canvas"	width="800"	height="800"></canvas>
<br>
</p>
<script>
// Global/Shared Variables:
var	context,
	canvas,
	shiftX=0, //shifting factor of X-axis
	shiftY=0, //shifting factor of Y-axis
	zoomFactor=1, //zooming Factor
	index=0, // index of node being zoomed
	done=1, // flag, 1 if done with zooming
	speed=1,
	initialMousePressX=0,
	initialMousePressY=0,
	isMousePressed=false; 

// each element of (node) will be sub-array
// each sub-array will contain
// [	index,
//	centerX,centerY,
//	Radius
// ]
//      after init();
var node=[];


// children[i]= [..children of parent#i..]
var children=[	[1,2,3],
		[],
		[],
		[4,5],
		[],[]
	     ];



//var children=[	[1,5,6,6,6,6,6,1,1],[2,3,4,6,6,6],[6,7,7,7,7],[],[],[],[],[]];


// Clear the canvas,
// draw BIG BLACK RECTANGLE!
function clearCanvas()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.beginPath();
        context.rect(0, 0,canvas.width, canvas.height);
        context.fillStyle = 'black';
        context.fill();
}

// function that draws a circle/node
// given it's X,Y,R
function circle(x,y,r)
{
	context.beginPath();
	context.arc(x, y, r+10, 0, 2 * Math.PI, false);
	context.fillStyle = "white";
	context.fill();
	context.lineWidth = 10;
	context.strokeStyle = "red";
	context.stroke();
}

//Function that initialize the X,Y,R values for all nodes
function init()
{
	var r,dAngle,poppedNode;
	//Root Radius= 1/2 of the Min(width/2 , height/2 )
//	var R=Math.min(canvas.width/2.545,canvas.height/2.545,400);
        var R=Math.min(canvas.width/2.545,canvas.height/2.545,400);

	//[index,centerX,centerY,Radius] each element
	node=[[0,canvas.width/2,canvas.height/2,R]];

	//initialize the queue with the root node
	var q=[node[0]];
	// ...

	// do BFS to generate the node array:
	while(q.length>0)
	{
		poppedNode=q.pop();
		
		// dAngle : Angle difference between a node & another.
		var dAngle=361/Math.max(children[poppedNode[0]].length,1);

		// for each child (i) of the poppedNode:
		for(i=1;i<=children[poppedNode[0]].length;i++)
		{
			// ...
			var newNode=[
					//Index of the newNode:
					children[poppedNode[0]][i-1],
					// Center-X of the newNode:
					poppedNode[1]+Math.cos(dAngle*i)*(poppedNode[3]+poppedNode[3]/2),
					// Center-Y of the newNode:
					poppedNode[2]+Math.sin(dAngle*i)*(poppedNode[3]+poppedNode[3]/2),
					// Radius of the newNode = parent's radius/2:
					poppedNode[3]/2
				    ];
			node.push(newNode);
			q.push(newNode); //..push it to the queue to be processed
		}
	}
	
	speed=Math.min(canvas.width,canvas.height)*3/100; //3%
}

function draw()
{
	clearCanvas();
        var imgs=["img/pin.png","img/profile.png","img/ninjanoid.png","img/ccbysa.png","img/githubcat.png","img/googlecode.png"];
	for(i=node.length-1;i>=0;i--)
        {
		circle((node[i][1]+shiftX)*zoomFactor,(node[i][2]+shiftY)*zoomFactor,node[i][3]*zoomFactor);
                imageAtNode(i,imgs[i]);
        }
	//after drawing circles, I 'll draw the images
	//here,I'm assigning images with nodes
//      imageAtNode(0,"img/pin.png");
//	imageAtNode(1,"img/profile.png");
//	imageAtNode(2,"img/ninjanoid.png");
//	imageAtNode(3,"img/ccbysa.png");
//	imageAtNode(5,"img/githubcat.png");
//	imageAtNode(4,"img/googlecode.png");
}

function imageAtNode(i,src)
{
        if(src.length==0) return;

	var x=(node[i][1]+shiftX)*zoomFactor;
	var y=(node[i][2]+shiftY)*zoomFactor;
/*
//		side^2+side^2= (2r)^2
//		2(side^2)=  (2r)^2
//		sqrt(2)*side=2r
//		side=2r/sqrt(2)
//		side/2=r/sqrt(2)
*/
	var s=(node[i][3]*2)/Math.sqrt(2);
	s*=zoomFactor;


	var img = new Image();
	img.src = src;
	var w=img.width;
	var h=img.height;
	img.onload =function(){
		if(w==0 || h==0)
			w=h=200; //assume it's size is 200x200
		if(w<=s && h<=s )
			context.drawImage(	img,x-w/2,y-h/2	);
		};
}
function zoom()
{
	done=0;
	var pass=0;
	if((node[index][1]+shiftX+speed)*zoomFactor<canvas.width/2)
		shiftX+=speed;
	else if((node[index][1]+shiftX-speed)*zoomFactor>canvas.width/2)
		shiftX-=speed;
	else	pass++;

	if((node[index][2]+shiftY+speed)*zoomFactor<canvas.height/2)
		shiftY+=speed;
	else if((node[index][2]+shiftY-speed)*zoomFactor>canvas.height/2)
		shiftY-=speed;
	else	pass++;


	if((node[index][3]*(zoomFactor+0.1)*2<canvas.width/2)
			&& (node[index][3]*(zoomFactor+0.1)*2<canvas.height/2))
		zoomFactor+=0.1;
	else if((node[index][3]*(zoomFactor-0.1)*2>canvas.width/2)
			&& (node[index][3]*(zoomFactor-0.1)*2>canvas.height/2))
		zoomFactor-=0.1;
	else	pass++;

	draw();
	if(pass<3)
		setTimeout("zoom();",1);
	else
	{
		done=1;
		if(index==5)
			setTimeout('top.location.href="http://lagnetk.googlecode.com";',1000);
		else if(index==4)
			setTimeout('top.location.href="https://github.com/yoga1290/lagne.tk";',1000);
		else if(index==1)
			setTimeout('top.location.href="http://about.me/yoga1290";',1000);
                else if(index==2)
 			setTimeout('top.location.href="http://lagnetk.googlecode.com/files/Elections.apk";',1000);         
		
	}
}
function getSelectedIndex(x,y)
{
	var nx=0,ny=0,nr=0;
	x=((x/zoomFactor-shiftX));
	y=((y/zoomFactor-shiftY));
	for(var i=0;i<node.length;i++)
	{
		nx=node[i][1];
		ny=node[i][2];
		nr=node[i][3];
		nx=nx-x;
		nx=nx*nx;
		ny-=y;
		ny*=ny;
		nr*=nr;
			
		if(	nx+ny	<=	nr)
			return i;
	}
	return	-1;
}
function main()
{
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.lineWidth = 1;
	context.strokeStyle = "black";

	canvas.width=$(window).width()-10;
	canvas.height=$(window).height()-10;
	init();
	draw();

	done=0;
	index=0;
	zoom();

	//Events Listeners:
	$(document).mousedown(function(e){
			initialMousePressX=e.pageX;
			initialMousePressY=e.pageY;
			isMousePressed=true;
		});

	$(document).mousemove(function(e){

			if(!isMousePressed) return;
			//Drag the whole Canvas, while moving the mouse & keep pressing
			shiftX+=(e.pageX-initialMousePressX)/100;
			shiftY+=(e.pageY-initialMousePressY)/100;
			draw();
		});

	$(document).mouseup(function(e){
			isMousePressed=false;

			if(e.pageX!=initialMousePressX	&&	e.pageY!=initialMousePressY)
					return;

			var i=getSelectedIndex(e.pageX,e.pageY);
			if(i!=-1)
			{
				index=i;
				zoom();
			}
		});


	$(window).resize(function(){
		canvas.width=$(window).width()-10;
		canvas.height=$(window).height()-10;
		init();
		zoom();
		});
}
main();
//$(document).ready(main);
</script>
</body>
</html>
